let listenAction;

export default {
  inserted(el, binding) {
    const params = binding.value || {};
    const stickyTop = params.stickyTop || 0;
    const zIndex = params.zIndex || 1000;
    const elStyle = el.style;

    elStyle.position = '-webkit-sticky';
    elStyle.position = 'sticky';
    // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
    // if (~elStyle.position.indexOf('sticky')) {
    //     elStyle.top = `${stickyTop}px`;
    //     elStyle.zIndex = zIndex;
    //     return
    // }
    const elHeight = el.getBoundingClientRect().height;
    const elWidth = el.getBoundingClientRect().width;
    elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;

    const parentElm = el.parentNode || document.documentElement;
    const placeholder = document.createElement('div');
    placeholder.style.display = 'none';
    placeholder.style.width = `${elWidth}px`;
    placeholder.style.height = `${elHeight}px`;
    parentElm.insertBefore(placeholder, el);

    let active = false;

    const getScroll = (target, top) => {
      const prop = top ? 'pageYOffset' : 'pageXOffset';
      const method = top ? 'scrollTop' : 'scrollLeft';
      let ret = target[prop];
      if (typeof ret !== 'number') {
        ret = window.document.documentElement[method];
      }
      return ret;
    };

    const sticky = () => {
      if (active) {
        return;
      }
      if (!elStyle.height) {
        elStyle.height = `${el.offsetHeight}px`;
      }

      elStyle.position = 'fixed';
      elStyle.width = `${elWidth}px`;
      placeholder.style.display = 'inline-block';
      active = true;
    };

    const reset = () => {
      if (!active) {
        return;
      }

      elStyle.position = '';
      placeholder.style.display = 'none';
      active = false;
    };

    const check = () => {
      const scrollTop = getScroll(window, true);
      const offsetTop = el.getBoundingClientRect().top;
      if (offsetTop < stickyTop) {
        sticky();
      } else {
        if (scrollTop < elHeight + stickyTop) {
          reset();
        }
      }
    };
    listenAction = () => {
      check();
    };

    window.addEventListener('scroll', listenAction);
  },

  unbind() {
    window.removeEventListener('scroll', listenAction);
  }
};
